<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .modal-header {
            text-align: center;
        }

        table td {
            text-align: center;
            border: 0px;
        }
    </style>
    <title>分类列表</title>
    <!-- 分页 -->
    <link href="<%=basePath%>css/mypage.css" rel="stylesheet">

    <link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">

    <link href="<%=basePath%>css/bootstrap-datetimepicker.min.css" rel="stylesheet">

</head>

<body>
<jsp:include page="../main_top.jsp"></jsp:include>
<jsp:include page="../main_left.jsp"></jsp:include>
<!--=============================================================================================================================================================================-->
<!--main-container-part-->
<div id="content" style="margin-right: 1px; margin-top: 40px;">
    <!--breadcrumbs-->
    <div id="content-header">
        <div id="breadcrumb">
            <a href="<%=basePath%>admin/indexs" title="主页" class="tip-bottom"><i
                    class="icon-home"></i>主页</a> <a title="分类列表" class="tip-bottom">分类管理</a>
        </div>
    </div>
    <!--End-breadcrumbs-->

    <!-- Page table -->
    <div class="container" style="width: 1000px;">
        <!-- &lt;!&ndash; Marketing Icons Section &ndash;&gt;-->

        <div class="col-lg-12">
            <h2 class="page-header"
                style="margin-top: 10px; text-align: center; font-family: '微软雅黑', Verdana, sans-serif, '宋体', serif;">
                分类列表显示</h2>
        </div>

        <!--搜索栏-->
        <form class="form-horizontal" id="myserchform" name="myform" action="<%=basePath%>admin/searchCatelog"
              method="GET">
            <div class="form-group">
                <div class="col-sm-8" style="text-align: center;">
                    <span>分类编号：</span>
                    <input type="text" placeholder="请输入纯数字~" name="id" value="${searchcatelog.id}"/>
                    <span>分类名称：</span>
                    <input type="text" name="name" value="${searchcatelog.name}"/>
                </div>
                <div class="col-sm-4">
                    <button class="btn btn-success btn-sm" type="submit">查找</button>

                    <button type="button" class="btn btn-primary btn-sm"
                            onclick="add()">增加
                    </button>
                </div>
            </div>
        </form>

        <!--表格显示-->
        <table class="table table-bordered">
            <thead>
            <tr>
                <%--<th><input type="checkbox" id="selectAllButton"></th>--%>
                <!-- <th>ID</th> -->
                <th>ID</th>
                <th>分类名</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${catelogGrid.rows}" var="item">
                <tr>
                    <%--<td><input type="checkbox" name="itemIds" value="${item.id}"></td>--%>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.statusDesc}</td>
                    <td>
                        <c:if test="${0 == item.status}">
                            <button type="button" class="btn btn-info btn-sm" onclick="updateStatus(${item.id}, 1)">启用
                            </button>
                        </c:if>
                        <c:if test="${1 == item.status}">
                            <button type="button" class="btn btn-info btn-sm" onclick="updateStatus(${item.id}, 0)">禁用
                            </button>
                        </c:if>
                        <button type="button" class="btn btn-info btn-sm" onclick="doEdit(${item.id})">修改</button>
                            <%--<button class="btn btn-danger btn-sm" type="button" id="deleteCatelogButton"--%>
                            <%--onclick="doDelete(${item.id})">删除--%>
                            <%--</button>--%>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>

        <!--分页条-->
        <div style="text-align: right">
            <div class="pagination">
                <ul>
                    <li><a>总分类数:${catelogGrid.total }个</a></li>
                    <li><a>第${catelogGrid.current }页</a></li>
                    <c:if test="${catelogGrid.current ne 1 }">
                        <li><a href="<%=basePath%>admin/cateList?pageNum=${catelogGrid.current-1 }">上一页</a>
                        </li>
                    </c:if>

                    <c:if test="${catelogGrid.current < (catelogGrid.total+4)/5-1 }">
                        <li><a
                                href="<%=basePath%>admin/cateList?pageNum=${catelogGrid.current+1 }">下一页</a>
                        </li>
                    </c:if>
                </ul>
            </div>
        </div>
    </div>
</div>


<!--==================================================================================================================-->
<jsp:include page="../main_bottom.jsp"></jsp:include>

<!--修改  模态框（Modal） -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">分类信息</h4>
            </div>
            <div class="modal-body" style="height: 0 auto;">
                <form class="form-horizontal" id="myeditform" name="myform">
                    <input type="hidden" id="id" name="id" value=""/>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">分类ID:</label>
                        <div class="col-sm-8">
                            <input type="text" readonly class="form-control" name="id" readonly
                                   style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">分类名称:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="name" style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">商品数:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="number" readonly style="margin-top: 8px;"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">状态</label>
                        <div class="col-sm-8">
                            <input type="text" readonly class="form-control" name="status" style="margin-top: 8px;"/>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <div style="text-align:center">
                    <div class="col-sm-2"></div>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="doSave()">提交更改</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>



<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">分类信息</h4>
            </div>
            <div class="modal-body" style="height: 0 auto;">
                <form class="form-horizontal" id="myAddform" name="myform">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">分类名称:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="name" id="name" style="margin-top: 8px;"/>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <div style="text-align:center">
                    <div class="col-sm-2"></div>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="doAdd()">提交</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
</body>

<script type="text/javascript" src="<%=basePath%>js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrap.min.js"></script>
<!-- datetimepicker -->
<script type="text/javascript"
        src="<%=basePath%>js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"
        src='<%=basePath%>js/bootstrap-datetimepicker.zh-CN.js'></script>
<!-- 全选 base.js -->
<script type="text/javascript" src="<%=basePath%>js/custom/base.js"></script>
<script type="text/javascript">

    /* 修改 */
    function doEdit(id) {
        $.ajax({
            url: '<%=basePath%>admin/getCatelog',
            type: 'GET',
            data: {id: id},
            dataType: 'json',
            success: function (json) {
                if (json) {
                    $('#myeditform').find("input[name='id']").val(json.id);
                    $('#myeditform').find("input[name='name']").val(json.name);
                    $('#myeditform').find("input[name='number']").val(json.number);
                    $('#myeditform').find("input[name='status']").val(json.status);
                    $('#editModal').modal('toggle');
                }
            },
            error: function () {
                alert('请输入正确的数据!');
                $('#editModal').modal('hide');
            }
        });
    }


    /* 保存 */
    function doSave() {
        $.ajax({
            url: '<%=basePath%>admin/updateCatelog',
            type: 'POST',
            data: $('#myeditform').serialize(),// 序列化表单值
            dataType: 'json',
            success: function (json) {
                alert(json.msg);
                $('#editModal').modal('toggle');
                location.reload();
            },
            error: function () {
                alert('请求超时或系统出错!');
                $('#editModal').modal('toggle');
            }
        });

    }

    function updateStatus(id, status) {
        $.ajax({
            url: '<%=basePath%>admin/updateStatus',
            type: 'GET',
            data: {
                id: id,
                status: status
            },
            dataType: 'json',
            success: function (json) {
                if (json.success) {
                    $('#editModal').modal('toggle');
                    location.reload();
                } else {
                    alert(json.msg)
                }
            },
            error: function () {
                alert('请求超时或系统出错!');
                $('#editModal').modal('toggle');
            }
        });
    }


    function add() {
        $('#addModal').modal('toggle');
    }

    /* 新增 */
    function doAdd(){
        var data = {
            name: $('#name').val()
        };

        console.log(data);

        $.ajax({
            url:'<%=basePath%>admin/addCotelog',
            type:'POST',
            data: JSON.stringify(data),
            dataType:'json',
            contentType : 'application/json;charset=UTF-8',
            success:function(json){
                if (json.success) {
                    alert(json.msg);
                    location.reload();
                } else {
                    alert(json.msg);
                }
            },
            error:function(){
                alert('请求超时或系统出错!');
                $('#myviewform').modal('toggle');
            }
        });

    }

    <%--function doDelete(id) {--%>
    <%--$.ajax({--%>
    <%--url: '<%=basePath%>admin/doDelete',--%>
    <%--type: 'GET',--%>
    <%--data: {id: id},// 序列化表单值--%>
    <%--dataType: 'json',--%>
    <%--success: function (json) {--%>
    <%--if (json.success) {--%>
    <%--alert(json.msg);--%>
    <%--$('#editModal').modal('toggle');--%>
    <%--location.reload();--%>
    <%--} else {--%>
    <%--alert(json.msg)--%>
    <%--}--%>
    <%--},--%>
    <%--error: function () {--%>
    <%--alert('请求超时或系统出错!');--%>
    <%--$('#editModal').modal('toggle');--%>
    <%--}--%>
    <%--});--%>
    <%--}--%>



    //根据值 动态选
    $("#myselected option[value='${searchcatelog.status}']").attr("selected", "selected");
</script>
</html>
